<template>
  <div class="infobasemodal-page">
    <container-box :metaTitle="routeMeta.title || ''">
      <div slot="container">
        <mds-button type="primary" @click="openModal">2列表单弹框</mds-button>
        <mds-modal
            :visibility="visibility"
            class="two-step-column_modal"
            title="2列表单弹框"
            @ok="handleOk"
            width="632px"
            @close="handleClose"
            :mask="mask"
            :showClose="true"
        >
            <mds-row class="row" type="flex" :gutter="16" justify="space-between">
                <mds-col :span="12">
                    <p class="title">文本输入框</p>
                    <mds-input
                        placeholder="请输入名称"
                        v-model="inputValue"
                    ></mds-input>
                </mds-col>
                <mds-col :span="12">
                    <p class="title">下拉未选</p>
                    <mds-select
                        style="width: 100%;"
                        defaultValue="选项一"
                        placeholder="请选择"
                        :value="selectValue"
                        @change="handleChange1"
                        size="medium"
                        >
                        <mds-option value="选项一">选项一</mds-option>
                        <mds-option value="选项二">选项二</mds-option>
                        <mds-option value="选项三">选项三</mds-option>
                    </mds-select>
                </mds-col>
            </mds-row>
            <mds-row class="row" type="flex" :gutter="16" justify="space-between">
                <mds-col :span="12">
                    <p class="title">下拉已选
                        <!-- <mds-tooltip title="tooltip提示">
                            <mds-icon type="line-question-circle" />
                        </mds-tooltip> -->
                    </p>
                    <mds-select
                        style="width: 100%;"
                        defaultValue="选项一"
                        placeholder="请选择"
                        @change="handleChange2"
                        :value="select2Value"
                        size="medium"
                        >
                        <mds-option value="选项一">选项一</mds-option>
                        <mds-option value="选项二">选项二</mds-option>
                        <mds-option value="选项三">选项三</mds-option>
                    </mds-select>
                </mds-col>
                <mds-col :span="12">
                    <p class="title">时间选择</p>
                    <mds-time-picker
                        style="width: 100%;"
                        :is-range="true"
                        v-model="timeValue" >
                    </mds-time-picker>
                </mds-col>
            </mds-row>
            <mds-row class="row" type="flex" :gutter="16" justify="space-between">
                <mds-col :span="24">
                    <p class="title">单项选择</p>
                    <mds-radio-group
                        v-model="checkedValue"
                        name="radiogroup">
                        <mds-radio value="a">按城市计划</mds-radio>
                        <mds-radio value="b">按部门计划</mds-radio>
                        <mds-radio value="c">按部门计划</mds-radio>
                        <mds-radio value="d">按部门计划</mds-radio>
                    </mds-radio-group>
                </mds-col>
            </mds-row>
            <mds-row class="row" type="flex" :gutter="16" justify="space-between">
                <mds-col :span="24">
                    <p class="title">文本域</p>
                    <mds-input-textarea
                        placeholder="请输入"
                        rows="4"
                        v-model="textareaValue"
                    ></mds-input-textarea>
                    <p class="title">这里显示额外的帮助说明或辅助信息</p>
                </mds-col>
            </mds-row>
            <div slot="footer" style="text-align: right;">
                <Mds-button type="primary" @click='handleOk' style="margin-left: 8px;">
                保存
                </Mds-button>
                <Mds-button @click='handleOk' style="margin-left: 8px;">
                取消
                </Mds-button>
            </div>
        </mds-modal>
      </div>
    </container-box>
  </div>
</template>
<script>
import ContainerBox from '@/components/ContainerBox'
export default {
  components: {
    ContainerBox
  },
  computed: {
    routeMeta() {
      return this.$route.meta || {}
    }
  },
  data() {
    return {
      inputValue: '',
      selectValue: '',
      select2Value: '选项二',
      timeValue: [
        null,
        null
      ],
      checkedValue: 'a',
      textareaValue: '',
      visibility: false,
      mask: true
    }
  },
  methods: {
    handleChange1(val) {
      this.selectValue = val
    },
    handleChange2(val) {
      this.select2Value = val
    },
    openModal() {
      this.visibility = true
    },
    handleOk() {
      this.visibility = false
    },
    handleClose() {
      this.visibility = false
    }
  }
}
</script>
<style>
.two-step-column_modal .row{
    margin-bottom: 24px;
    /* font-size: 14px; */
}
.two-step-column_modal .row .title{
    margin-bottom: 8px;
    color: #7F8FA4;
}

</style>
